<html>
    <head>
        <title>电子表</title>
        <meta charset="utf-8">
        <style>
            body{
                background-color: black;
                /*设置文本对齐方式（居中，居左，居右）*/
                text-align: center;
            }
            h1{
                /*设置文本颜色*/
                color:#9999ff;
                /*设置字体大小*/
                font-size:200px;
                /*设置字体粗细，范围100-700*/
                font-weight:normal;
                margin:0;
                /*上外间距*/
                margin-top:300px;
            }
            p{
                color:#99ccff;
                margin:0;
            }
        </style>
    </head>

    <body>
        <h1 id="time">14:22:34</h1>
        <p id="date">2017年6月28 星期三</p>
    </body>

    <script>
        // document.write("你好");
        // alert("你好");
        // 通过id属性获得H1标签
        var t=document.getElementById("time");
        // t.textContent="hello";
        var d=document.getElementById("date");
         
        // 定时器函数，每隔一段时间就执行一段函数
        setInterval(function(){
            // 获得当前时间，得到是一个日期对象
                var now=new Date();
                // 从当前时间中抽出时分秒
                var h=now.getHours();
                var m=now.getMinutes();
                var s=now.getSeconds();

                s=s<10?"0"+s:s;
                // 将时分秒拼接复制给h1标签
                t.textContent=h+":"+m+":"+s;



                // 提取年
                var y=now.getFullYear();
                // 提取月
                var mon=now.getMonth()+1;
                // 提取日期
                var da=now.getDate();
                // 提取星期
                var week=now.getDay();
                week=numberTozh(week);
                d.textContent=y+"年"+mon+"月"+da+"日,星期"+week;

        },1000);
        function numberTozh(n){
        switch(n){
            case  0:
                return "日"
                break;
            case  1:
                 return "一"
                break;
            case  2:
                 return "二"
                break;
            case  3:
   
                  return "三"
                break;
            case  4:
                 return "四"
                break;
            case  5:
                 return "五"
                break;
            case  6:
                 return "六"
                break;
                    
                default:
                break;
        }
}
// -------------------------------------------------------------------------------
        


    </script>
</html>